/*
 * onImage jQuery plugin
 * version 0.1
 *
 *
 * Manel R. Dom�nech
 * mdomenech@onestic.com
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * http://onestic.com
 *
 */
 
 ;(function($) {


///////////////////////////////////////////////////////////////////////////////
// onImage function
///////////////////////////////////////////////////////////////////////////////
 
 
$.onImage = function(el, settings) {
	if (settings == undefined) settings = {};
	
	var elStyles = $(el).onStyles();
	
	var handler = $(el).onViewport(settings.onViewport, false);
	
	var $viewport = handler.viewport();
	var $canvas = handler.canvas();
	
	var $toolbar;
	
	var resizing = false;
	
	var $container = $("<span>").addClass('on-viewport').css({
		overflow: 'visible',
		border: 'none'		
	});	
	$container = $viewport.wrap($container).parent();
	
	$container.css(elStyles);
	
	$toolbar = $('<div>').addClass('on-toolbar').css({display: 'none'});
	$container.prepend($toolbar);
	
	
	function updateToolbar() {
		var w = $container.outerWidth() + 0;
		var h = $container.height();		
		
		var mt = parseInt($container.css("border-top-width"), 10);
		var ml = parseInt($container.css("border-left-width"), 10);

		$toolbar.css({
			top: -mt+'px',
			left: (w - ml)+'px',
			width: '24px',
			height: h+'px'
		});
		
		return $toolbar;
	}
	
	function appear() {
		if (resizing) return;
		var w = $viewport.outerWidth() + 0;
		var h = $viewport.height();		
		updateToolbar().css({width: 0}).show().stop().animate({width: '24px'}, 'fast');
	}
	
	function hide() {		
		if (resizing) return;
		$toolbar.stop().animate({width: 0}, 'fast', function(){$(this).hide()});
	}
	
	
	var $tool;
	
	$('<a>').html('t0').addClass('on-tool').addClass('on-tool-move').css({cursor: 'pointer'}).click(function() {
		OnImage.tools.pan(handler, this);
	}).appendTo($toolbar).attr('title', 'Mover la imagen');
	
	$('<a>').html('t1').addClass('on-tool').addClass('on-tool-scale-to-fit').css({cursor: 'pointer'}).click(function() {	
		handler._start().scaleToFit().centerh().centerv()._end();		
	}).appendTo($toolbar).attr('title', 'Encajar la imagen en el �rea');
	
	$('<a>').html('t2').addClass('on-tool').addClass('on-tool-scale-to-fit-crop').css({cursor: 'zoom'}).click(function() {
		handler._start().scaleToFit(1).centerh().centerv()._end();
	}).appendTo($toolbar).attr('title', 'Redimensionar la imagen hasta aprovechar toda el �rea');
	
	$('<a>').html('t3').addClass('on-tool').addClass('on-tool-scale-1-1').css({cursor: 'pointer'}).click(function() {
		handler.scaleTo(1).centerh().centerv();
	}).appendTo($toolbar).attr('title', 'Dejar la imagen en su tama�o natural');

	
	$('<a>').html('t3').addClass('on-tool').addClass('on-tool-zoomin').css({cursor: 'pointer'}).click(function() {
		var w = $viewport.width();
		var h = $viewport.height();
		handler.scalevp(1.1, w/2, h/2);
	}).appendTo($toolbar).attr('title', 'Acercar la imagen');

	$('<a>').html('t3').addClass('on-tool').addClass('on-tool-zoomout').css({cursor: 'pointer'}).click(function() {
		var w = $viewport.width();
		var h = $viewport.height();
		handler.scalevp(0.9, w/2, h/2);
	}).appendTo($toolbar).attr('title', 'Alejar la imagen');
	

	$('<a>').html('t4').addClass('on-tool').addClass('on-tool-quote').css({cursor: 'pointer'}).click(function() {
		$viewport.unbind('mousedown').css({cursor: 'crosshair'}).removeData('imgAreaSelect');
		
		var $buttons = $("<div>").addClass('on-select-buttons');
		var ok = $('<button>').addClass('on-select-ok').appendTo($buttons).click(function() {this.blur(); okSelection(); return false;});
		var cancel = $('<button>').addClass('on-select-cancel').appendTo($buttons).click(function() {this.blur(); cancelSelection(); return false;});
		
		var started = false;
		
		var iasOptions = {
			onSelectStart: function(img, s) {
				//console.log(s);
				started = true;
				o = $viewport.offset();
				$buttons.css({
					top: (o.top + s.y2 + 2) + 'px',
					left: (o.left + s.x1) + 'px'
				});								
				$buttons.appendTo('body').show();
			},
			onSelectChange: function(img, s) {
				if (!started) return;
				$buttons.css({
					top: (o.top + s.y2 + 2) + 'px',
					left: (o.left + s.x1) + 'px'
				});				
				
			},
			onSelectEnd: function(img, s) {
				if (!s.width && !s.height) cancelSelection();
			},
			instance: true,
			enable: true
		};
		
		var ias;
		
		function okSelection() {
			var o = $canvas.position();
			var s = ias.getSelection();
			
			s.x1 -= o.left + 1;
			s.y1 -= o.top + 1;
			s.width -= 2;
			s.height -= 2;
			
			$area = handler.addArea(s);
			
			$area.css({
				cursor: 'pointer',
				/*background: 'yellow'*/
			});
			
			$area.mousedown(function(e) {
				
				e.preventDefault();
				var o = $canvas.position();
				var p = $(this).position();
				
				$viewport.unbind('mousedown');	
				var x1 = p.left + o.left + 1;
				var y1 = p.top + o.top + 1;				
				var x2 = x1 + $(this).width() + 1;
				var y2 = y1 + $(this).height() + 1;
				ias.setSelection(x1, y1, x2, y2);
				ias.setOptions({show: true, hide: false, enable: true});
				
				var off = $viewport.offset();
				
				$buttons.css({
					top: (off.top + y2 + 2) + 'px',
					left: (off.left + x1) + 'px'
				});
				
				$buttons.show();
				
				//$('.imgareaselect-selection').trigger(e);
				
				$(this).remove();
				
				return false;
			});
			
			cancelSelection();
		}
		
		function cancelSelection() {
			ias.setOptions({show: false, hide: true});
			$buttons.hide();
		}
		
		ias = $viewport.imgAreaSelect(iasOptions);
		
	}).appendTo($toolbar).attr('title', 'Cambiar a modo de etiquetado');
	
	
	$container.bind('mouseenter', function(e) {		
		//console.log('in!');
		appear();
		$(this).unbind('mouseleave').bind('mouseleave', function(e) {
			//console.log('out!');
			hide();
		});		
	});

	$viewport.resizable({
		start: function(e, ui) { resizing = true; },
		resize: function() { updateToolbar(); },
		stop: function() { resizing = false; }
	});
	
	OnImage.tools.pan(handler, this);
	OnImage.tools.zoom(handler, this);

}

///////////////////////////////////////////////////////////////////////////////
// jQuery onImage DOM extension
///////////////////////////////////////////////////////////////////////////////

$.fn.extend({
	onImage: function(settings) {
		var handlers = [];
		
		this.each(function () {
			if ($(this).data('onImage'))
				$(this).data('onImage').settings(settings);		
			else {
				$(this).data('onImage', new $.onImage(this, settings));
				handlers.push($(this).data('onImage'));
			}
        });
		
		if (handlers.length == 1) return handlers[ 0 ];
		return handlers;
	
	}
});



// End the closure
})(jQuery);